<template>
	<view class="container">
		<block v-for="(msgItem,index) in socketMsgQueue" :key="index">
			<msg-item :socketMsg="msgItem" :msgIndex="index"></msg-item>
		</block>
	</view>
</template>

<script>
	import msgItem from "@/components/msg-box/msg-item.vue"
	export default {
		components:{
			msgItem
		},
		data() {
			return {
				moveX:2,
				windowW:375,
				isFadeOut:false,
				isFadeIn:false,
				percent:0
			}
		},
		computed:{
			socketMsgQueue(){
				return this.$socket.state.socketMsgQueue;
			}
		},
		watch:{
			"$socket.state.showMsg":function(newVal){
				if(newVal) {
					this.isFadeIn = true;
					setTimeout(()=> {
						this.isFadeIn = false;
					},1000)
				}
				console.log(newVal);
			}	
		},
		created() {
			this.windowW = uni.getSystemInfoSync().windowWidth;
			console.log('windowW',this.windowW);
			this.moveX = this.windowW;
			this.timer = setInterval(() => {
				this.percent++;
				if(this.percent>=100) {
					this.percent = 100;
					clearInterval(this.timer);
				}
			},500);
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			tapEvent() {
				uni.navigateTo({
					url:"/pages/fill/did",
					success: () => {
						this.$socket.commit('closeMsg');
					}
				})
			},
			change(e) {
				this.scrollX = e.detail.x;
				if(this.scrollX < 100){
					this.isFadeOut = true;
					this.$socket.commit('closeMsg');
				}
			},
			touchendEvent(e) {
				this.moveX = this.scrollX;
				if(this.moveX < 100) {
					this.$nextTick(function(){
						this.moveX = 0;
					})
				} else {
					this.$nextTick(function(){
						this.moveX = this.windowW;
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		overflow: hidden;
	}
	view ,movable-view ,movable-area{
		box-sizing: border-box;
	}
	
	.container {
		position: fixed;
		width: 100vw;
		// height: 120rpx !important;
		top: 160rpx;
		left: 0;
		z-index: 9999;
		
	}
	// .msg-container {
	// 	width: 300vw;
	// 	height: 160rpx;
	// 	margin-left: -100vw; 
	// 	display: flex;
	// 	margin-bottom: 20rpx;
		
	// 	.content { 
	// 		position: relative;
	// 		width: calc(100vw - 60rpx);
	// 		margin: 0 30rpx;
	// 		height: 100%;
	// 		background-color: rgba(255,255,255,0.9);
	// 		border-radius: 20rpx;
	// 		padding: 20rpx;
	// 		box-shadow: 0 0 6rpx 6rpx rgba(0,0,0,0.1);
			
	// 		.title {
	// 			font-weight: 600;
	// 			font-size: 32rpx;
	// 			margin-bottom: 20rpx;
	// 			color: #666666;
	// 			display: flex;
	// 			align-items: center;
				
	// 			&.active {
	// 				color: #00aa00;
	// 			}
				
	// 			.icon-duigou {
	// 				width: 36rpx;
	// 				height: 36rpx;
	// 				margin-left: 10rpx;
	// 			}
	// 		}
			
	// 		.msg-content {
	// 			line-height: 1.6;
	// 			color: #18B566;
	// 			font-size: 30rpx;
	// 		}
			
	// 		.close-icon {
	// 			position: absolute;
	// 			right: 20rpx;
	// 			top: 50%;
	// 			transform: translateY(-50%);
				
	// 			image {
	// 				width: 50rpx;
	// 				height: 50rpx;
	// 			}
	// 		}
	// 	}
		
	// }
	.fadeIn {
		-webkit-animation: fadeIn linear 0.5s both;
	} 
	.fadeOut{
		-webkit-animation: fadeOut linear 0.5s both;
		
	}
	@keyframes fadeIn{
	    0%{
			transform: translateX(0);
			// opacity: 1;
			// transform: scale(0);
		}
		
	    100%{
			// transform: scale(1);
			transform: translateX(100vw);
		}
	}
	@keyframes fadeOut{
	    0%{
			opacity:1;
			transform: translateX(0);
			transform: scale(1);
		}
		
	    100%{
			opacity:0;
			transform: scale(0);
			transform: translateX(-100%);
		}
	}
	
	@keyframes zwyHeightSec {
		100% {
			background-position: right -40px top 0px;
		}
	}
	
	.zwyHeightSec {
		position: relative;
		overflow: hidden;
	}
	
	.zwyHeightSec::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
		background-size: 40px 100%;
		background-repeat: no-repeat;
		background-position: left -40px top 0;
		animation: zwyHeightSec 1s ease infinite;
		z-index: 999;
	}
	
</style>
